<template>
  <view class="container">
    <view class="title">问题类别</view>
    <picker class="picker" mode="selector" :range="categories" @change="onCategoryChange">
      <view class="picker-text">{{ selectedCategory }}</view>
    </picker>
    <view class="title">客户建议提交</view>
    <textarea class="textarea" placeholder="请输入问题描述（不超过300字）" v-model="description" :maxlength="300"></textarea>
    <button class="submit-btn" @click="submitSuggestion">提交建议</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      categories: ['小程序问题', '服务问题', '建议', '投诉', '其他'],
      selectedCategory: '小程序问题',
      description: ''
    };
  },
  methods: {
    onCategoryChange(e) {
      this.selectedCategory = this.categories[e.detail.value];
    },
    submitSuggestion() {
      // 在这里可以添加提交建议的逻辑，例如将数据发送到服务器
      console.log('提交的建议：', {
        category: this.selectedCategory,
        description: this.description
      });
      // 提交成功后可以重置表单
      this.selectedCategory = '小程序问题';
      this.description = '';
    }
  },
  onLoad: function() {
  	uni.setNavigationBarTitle({
  		title:"问题建议"
  	})
  	// 设置导航栏标题颜色
  	uni.setNavigationBarColor({
  	  frontColor: '#ffffff',
  	  backgroundColor: '#721b28'
  	});
  }
};
</script>

<style scoped lang="scss">
.container {
	align-items: center;
	padding: 50upx;
  

	.title {
	  font-size: 30upx;
	  text-align:left;
	  padding: 10upx 0px;
	  font-weight: bold;
	}

	.picker {
	  width:93%;
	  padding: 20upx;
	  border: 1px solid #ccc;
	  border-radius: 5px;
	  margin-bottom: 10px;
	}

	.picker-text {
	  color: #999;
	}

	.textarea {
	  width: 93%;
	  padding: 20upx;
	  border: 1px solid #ccc;
	  border-radius: 5px;
	  margin-bottom: 10px;
	}

	.submit-btn {
	  background-color: #721b28;
	  color: white;
	  border: none;
	  border-radius: 5px;
	  margin-top: 10px;
	}
}
</style>
